<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #warp1 {
      /* flex是行内块元素的排列方式 */
      display: flex;
      width: 700px;
      height: 500px;
      border: 5px solid rebeccapurple;
      /* 文字的水平垂直居中 */
      text-align: center;
      line-height: 100px;
      /* 行排列 主轴水平 默认 */
      flex-direction: row;
      /* 溢出时自动换行 不然就压缩元素 */
      flex-wrap: wrap;

      /*
        justify-content
        这个属性是控制主轴方向的元素排列
        center居中 flex-star/end 主轴的起点/终点对齐
        space-between类似两端对齐
        space-evenly等间距排列
        space-around元素间的间隔是元素与边界之间的间隔的两倍
      */
      /*justify-content: center;*/
      /*justify-content: flex-start;*/
      justify-content: space-between;
      /*justify-content: space-evenly;*/
      /*justify-content: space-around;*/

      /*
        align-items
        是交叉轴(与主轴垂直的轴)的元素的排列方式(单行)
        item-content则是控制多行
        与justify-content一起使用可实现居中(水平垂直居中)排列
        stretch是拉伸排列 子元素设置了宽高(当交叉轴是垂直方向时设置了高度则无效,水平则同理)时无效 因为宽高的优先级高
      */
      align-items: center;
      /*align-items: stretch;*/
    }

    #warp1 .content {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: pink;
    }

    #warp2 {
      width: 500px;
      height: 500px;
      margin-top: 20px;
      border: 5px solid rosybrown;
    }

    #warp2 ul{
      display: flex;
      /* 注意要有高度 不然align-items就无法与父容器实现垂直居中 */
      height: 500px;
      justify-content: space-between;
      align-items: center;
    }

    #warp2 ul li {
      /*float: left;*/
      background-color: pink;
      list-style: none;
      margin: 10px;
    }

    /* 对单个元素控制 */
    #warp2 ul li:first-child {
      align-self: flex-start;
    }
    #warp2 ul li:last-child {
      align-self: flex-end;
    }
  </style>
</head>
<body>

  <div id="warp1">
    <div class="content">1</div>
    <div class="content">1</div>
    <div class="content">1</div>
    <div class="content">1</div>
  </div>

  <div id="warp2">
    <ul>
      <li><a href="">123</a></li>
      <li><a href="">123</a></li>
      <li><a href="">123</a></li>
    </ul>
  </div>

</body>
</html>
